import React, { memo, useEffect } from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';
import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './style.less';

import { changeLoginAction } from './store/actionCreators';

export default memo(function Login(props) {
  const dispatch = useDispatch();
  /* 跳转页面 */
  const onFinish = (values) => {
    props.history.push('/main/category');
  };

  const { info } = useSelector(
    /* 获取数据 */
    (state) => ({
      info: state.getIn(['login', 'info']),
    }),
    shallowEqual,
  );

  useEffect(() => {
    /* 发送请求 */
    dispatch(changeLoginAction());
  }, [dispatch]);
  /* 存储loaclstorage */
  window.localStorage.setItem('name', info.name);
  window.localStorage.setItem('token', info.token);

  return (
    <div className="login">
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
      >
        <div className="title">登录</div>

        <Form.Item
          name="username"
          rules={[
            {
              required: true,
              message: 'Please input your Username!',
            },
          ]}
        >
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="请输入用户名"
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: 'Please input your Password!',
            },
          ]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="请输入密码"
          />
        </Form.Item>
        <Form.Item className="options">
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>记住密码</Checkbox>
          </Form.Item>

          <a className="login-form-forgot" href="/wangjimima">
            忘记密码
          </a>
        </Form.Item>

        <Form.Item className="submit">
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
          >
            Log in
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
});
